<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>汉江圈商业联盟 - 积分管理系统</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
  
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#165DFF',
            secondary: '#36D399',
            warning: '#FF9F43',
            danger: '#FF5252',
            dark: '#1E293B',
            light: '#F8FAFC'
          },
          fontFamily: {
            inter: ['Inter', 'sans-serif'],
          },
        },
      }
    }
  </script>
  
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .card-shadow {
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.03);
      }
      .nav-shadow {
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
      }
      .scrollbar-hide::-webkit-scrollbar {
        display: none;
      }
      .scrollbar-hide {
        -ms-overflow-style: none;
        scrollbar-width: none;
      }
    }
  </style>
</head>
<body class="font-inter bg-gray-50 text-dark min-h-screen flex flex-col">
  <!-- 顶部导航 -->
  <header class="bg-white nav-shadow sticky top-0 z-50 transition-all duration-300">
    <div class="container mx-auto px-4 sm:px-6 lg:px-8">
      <div class="flex justify-between items-center h-16">
        <div class="flex items-center">
          <div class="flex-shrink-0">
            <span class="text-primary text-2xl font-bold">汉江圈商业联盟</span>
          </div>
          <div class="hidden md:block ml-10">
            <nav class="flex space-x-4">
              <a href="#dashboard" class="text-gray-900 hover:text-primary px-3 py-2 rounded-md text-sm font-medium transition-colors duration-200">
                <i class="fa fa-dashboard mr-1"></i> 数据概览
              </a>
              <a href="#members" class="text-gray-900 hover:text-primary px-3 py-2 rounded-md text-sm font-medium transition-colors duration-200">
                <i class="fa fa-users mr-1"></i> 会员管理
              </a>
              <a href="#activities" class="text-gray-900 hover:text-primary px-3 py-2 rounded-md text-sm font-medium transition-colors duration-200">
                <i class="fa fa-calendar mr-1"></i> 活动管理
              </a>
              <a href="#rules" class="text-gray-900 hover:text-primary px-3 py-2 rounded-md text-sm font-medium transition-colors duration-200">
                <i class="fa fa-book mr-1"></i> 积分规则
              </a>
            </nav>
          </div>
        </div>
        <div class="hidden md:block">
          <div class="flex items-center">
            <button id="add-member-btn" class="bg-primary hover:bg-primary/90 text-white px-4 py-2 rounded-md text-sm font-medium transition-colors duration-200 flex items-center">
              <i class="fa fa-plus-circle mr-1"></i> 新增会员
            </button>
          </div>
        </div>
        <div class="md:hidden">
          <button id="mobile-menu-button" class="text-gray-500 hover:text-primary focus:outline-none">
            <i class="fa fa-bars text-xl"></i>
          </button>
        </div>
      </div>
    </div>
    
    <!-- 移动端菜单 -->
    <div id="mobile-menu" class="hidden md:hidden bg-white">
      <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
        <a href="#dashboard" class="text-gray-900 hover:text-primary block px-3 py-2 rounded-md text-base font-medium">
          <i class="fa fa-dashboard mr-1"></i> 数据概览
        </a>
        <a href="#members" class="text-gray-900 hover:text-primary block px-3 py-2 rounded-md text-base font-medium">
          <i class="fa fa-users mr-1"></i> 会员管理
        </a>
        <a href="#activities" class="text-gray-900 hover:text-primary block px-3 py-2 rounded-md text-base font-medium">
          <i class="fa fa-calendar mr-1"></i> 活动管理
        </a>
        <a href="#rules" class="text-gray-900 hover:text-primary block px-3 py-2 rounded-md text-base font-medium">
          <i class="fa fa-book mr-1"></i> 积分规则
        </a>
        <button id="add-member-btn-mobile" class="w-full mt-2 bg-primary hover:bg-primary/90 text-white px-4 py-2 rounded-md text-sm font-medium transition-colors duration-200 flex items-center justify-center">
          <i class="fa fa-plus-circle mr-1"></i> 新增会员
        </button>
      </div>
    </div>
  </header>

  <!-- 主要内容 -->
  <main class="flex-grow container mx-auto px-4 sm:px-6 lg:px-8 py-6">
    <!-- 数据概览 -->
    <section id="dashboard" class="mb-12">
      <h2 class="text-2xl font-bold text-gray-900 mb-6 flex items-center">
        <i class="fa fa-dashboard text-primary mr-2"></i> 数据概览
      </h2>
      
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
        <!-- 会员总数卡片 -->
        <div class="bg-white rounded-xl p-6 card-shadow hover:shadow-lg transition-shadow duration-300 border-l-4 border-primary">
          <div class="flex items-center justify-between">
            <div>
              <p class="text-gray-500 text-sm">会员总数</p>
              <h3 class="text-3xl font-bold mt-1" id="total-members">20</h3>
              <p class="text-green-500 text-sm mt-1 flex items-center">
                <i class="fa fa-arrow-up mr-1"></i> 较上月增长 5%
              </p>
            </div>
            <div class="bg-primary/10 p-3 rounded-lg">
              <i class="fa fa-users text-primary text-xl"></i>
            </div>
          </div>
        </div>
        
        <!-- 总积分卡片 -->
        <div class="bg-white rounded-xl p-6 card-shadow hover:shadow-lg transition-shadow duration-300 border-l-4 border-secondary">
          <div class="flex items-center justify-between">
            <div>
              <p class="text-gray-500 text-sm">总积分</p>
              <h3 class="text-3xl font-bold mt-1" id="total-points">12,540</h3>
              <p class="text-green-500 text-sm mt-1 flex items-center">
                <i class="fa fa-arrow-up mr-1"></i> 较上月增长 12%
              </p>
            </div>
            <div class="bg-secondary/10 p-3 rounded-lg">
              <i class="fa fa-star text-secondary text-xl"></i>
            </div>
          </div>
        </div>
        
        <!-- 活动总数卡片 -->
        <div class="bg-white rounded-xl p-6 card-shadow hover:shadow-lg transition-shadow duration-300 border-l-4 border-warning">
          <div class="flex items-center justify-between">
            <div>
              <p class="text-gray-500 text-sm">活动总数</p>
              <h3 class="text-3xl font-bold mt-1" id="total-activities">15</h3>
              <p class="text-green-500 text-sm mt-1 flex items-center">
                <i class="fa fa-arrow-up mr-1"></i> 较上月增长 8%
              </p>
            </div>
            <div class="bg-warning/10 p-3 rounded-lg">
              <i class="fa fa-calendar-check-o text-warning text-xl"></i>
            </div>
          </div>
        </div>
        
        <!-- 合作项目卡片 -->
        <div class="bg-white rounded-xl p-6 card-shadow hover:shadow-lg transition-shadow duration-300 border-l-4 border-danger">
          <div class="flex items-center justify-between">
            <div>
              <p class="text-gray-500 text-sm">合作项目</p>
              <h3 class="text-3xl font-bold mt-1" id="total-projects">8</h3>
              <p class="text-green-500 text-sm mt-1 flex items-center">
                <i class="fa fa-arrow-up mr-1"></i> 较上月增长 3%
              </p>
            </div>
            <div class="bg-danger/10 p-3 rounded-lg">
              <i class="fa fa-handshake-o text-danger text-xl"></i>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 图表区域 -->
      <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <!-- 积分分布图表 -->
        <div class="bg-white rounded-xl p-6 card-shadow">
          <h3 class="text-lg font-semibold mb-4">会员积分分布</h3>
          <div class="h-80">
            <canvas id="pointsDistributionChart"></canvas>
          </div>
        </div>
        
        <!-- 活动类型图表 -->
        <div class="bg-white rounded-xl p-6 card-shadow">
          <h3 class="text-lg font-semibold mb-4">活动类型统计</h3>
          <div class="h-80">
            <canvas id="activityTypeChart"></canvas>
          </div>
        </div>
      </div>
    </section>
    
    <!-- 会员管理 -->
    <section id="members" class="mb-12">
      <div class="flex flex-col md:flex-row md:items-center md:justify-between mb-6">
        <h2 class="text-2xl font-bold text-gray-900 flex items-center">
          <i class="fa fa-users text-primary mr-2"></i> 会员管理
        </h2>
        <div class="mt-4 md:mt-0 flex items-center">
          <div class="relative mr-4">
            <input type="text" id="member-search" placeholder="搜索会员..." class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-all duration-200">
            <i class="fa fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
          </div>
          <div class="relative">
            <select id="member-filter" class="w-full pl-4 pr-10 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none appearance-none bg-white transition-all duration-200">
              <option value="all">全部会员</option>
              <option value="top">积分排名前十</option>
              <option value="active">活跃会员</option>
              <option value="inactive">消极会员</option>
            </select>
            <i class="fa fa-chevron-down absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 pointer-events-none"></i>
          </div>
        </div>
      </div>
      
      <!-- 会员表格 -->
      <div class="bg-white rounded-xl overflow-hidden card-shadow">
        <div class="overflow-x-auto">
          <table class="min-w-full divide-y divide-gray-200">
            <thead class="bg-gray-50">
              <tr>
                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                  会员ID
                </th>
                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                  会员名称
                </th>
                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                  所属行业
                </th>
                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                  总积分
                </th>
                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                  最近活动
                </th>
                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                  状态
                </th>
                <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
                  操作
                </th>
              </tr>
            </thead>
            <tbody class="bg-white divide-y divide-gray-200" id="members-table-body">
              <!-- 会员数据将通过JavaScript动态生成 -->
            </tbody>
          </table>
        </div>
        
        <!-- 分页 -->
        <div class="px-6 py-4 bg-white border-t border-gray-200 flex items-center justify-between">
          <div class="flex-1 flex justify-between sm:hidden">
            <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
              上一页
            </a>
            <a href="#" class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
              下一页
            </a>
          </div>
          <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
            <div>
              <p class="text-sm text-gray-700">
                显示 <span class="font-medium">1</span> 到 <span class="font-medium">10</span> 条，共 <span class="font-medium" id="total-members-pagination">20</span> 条结果
              </p>
            </div>
            <div>
              <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
                <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
                  <span class="sr-only">上一页</span>
                  <i class="fa fa-chevron-left"></i>
                </a>
                <a href="#" aria-current="page" class="z-10 bg-primary text-white relative inline-flex items-center px-4 py-2 border border-primary text-sm font-medium">
                  1
                </a>
                <a href="#" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium">
                  2
                </a>
                <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
                  <span class="sr-only">下一页</span>
                  <i class="fa fa-chevron-right"></i>
                </a>
              </nav>
            </div>
          </div>
        </div>
      </div>
    </section>
    
    <!-- 活动管理 -->
    <section id="activities" class="mb-12">
      <div class="flex flex-col md:flex-row md:items-center md:justify-between mb-6">
        <h2 class="text-2xl font-bold text-gray-900 flex items-center">
          <i class="fa fa-calendar text-primary mr-2"></i> 活动管理
        </h2>
        <div class="mt-4 md:mt-0 flex items-center">
          <button id="add-activity-btn" class="bg-primary hover:bg-primary/90 text-white px-4 py-2 rounded-md text-sm font-medium transition-colors duration-200 flex items-center mr-4">
            <i class="fa fa-plus-circle mr-1"></i> 新增活动
          </button>
          <div class="relative">
            <select id="activity-filter" class="w-full pl-4 pr-10 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none appearance-none bg-white transition-all duration-200">
              <option value="all">全部活动</option>
              <option value="upcoming">即将举行</option>
              <option value="past">已结束</option>
            </select>
            <i class="fa fa-chevron-down absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 pointer-events-none"></i>
          </div>
        </div>
      </div>
      
      <!-- 活动卡片网格 -->
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6" id="activities-grid">
        <!-- 活动卡片将通过JavaScript动态生成 -->
      </div>
    </section>
    
    <!-- 积分规则 -->
    <section id="rules" class="mb-12">
      <h2 class="text-2xl font-bold text-gray-900 mb-6 flex items-center">
        <i class="fa fa-book text-primary mr-2"></i> 积分规则
      </h2>
      
      <div class="bg-white rounded-xl overflow-hidden card-shadow">
        <div class="p-6">
          <div class="space-y-8">
            <!-- 积分获取规则 -->
            <div>
              <h3 class="text-xl font-semibold text-gray-800 mb-4 flex items-center">
                <i class="fa fa-plus-circle text-secondary mr-2"></i> 积分获取规则
              </h3>
              
              <div class="space-y-6">
                <div class="bg-blue-50 p-4 rounded-lg border-l-4 border-primary">
                  <h4 class="font-semibold text-primary mb-2">活动参与积分</h4>
                  <ul class="list-disc pl-5 space-y-2 text-gray-700">
                    <li>参加联盟组织的全体成员大会，每次积 20 分；参加联盟举办的培训、讲座、论坛等活动，每次积 10 分。需按时签到、全程参与，中途无故离场扣除本次活动一半积分。</li>
                    <li>主动报名并承担联盟活动的会务组织、后勤保障、主持、演讲等工作，根据工作难度与工作量额外增加 5 - 20 分。如担任大型活动的总策划可积 20 分，负责物资采购、现场引导等后勤工作积 10 分。</li>
                  </ul>
                </div>
                
                <div class="bg-green-50 p-4 rounded-lg border-l-4 border-green-500">
                  <h4 class="font-semibold text-green-600 mb-2">资源贡献积分</h4>
                  <ul class="list-disc pl-5 space-y-2 text-gray-700">
                    <li>在联盟微信群成功报备有效资源信息（经审核通过），每条积 5 分；成功介绍资源并促成对接，每单积 20 分；若对接项目交易额超过 10 万元，额外奖励 10 分；超过 50 万元，再额外奖励 20 分。</li>
                    <li>向联盟提供有价值的行业资讯、市场分析报告、商业合作机会等信息，经过会长、监事长和书记员认定后，每条积 5 - 10 分。</li>
                  </ul>
                </div>
                
                <div class="bg-purple-50 p-4 rounded-lg border-l-4 border-purple-500">
                  <h4 class="font-semibold text-purple-600 mb-2">合作与互助积分</h4>
                  <ul class="list-disc pl-5 space-y-2 text-gray-700">
                    <li>与联盟内其他会员达成商业合作，每次积 10 分；合作项目年度交易额超过 20 万元，额外奖励 15 分；超过 50 万元，再额外奖励 30 分。</li>
                    <li>为其他会员提供技术支持、业务指导、经验分享等帮助，经对方会员申请并由会长、监事长和书记员核实后，每次积 10 - 20 分。</li>
                  </ul>
                </div>
                
                <div class="bg-yellow-50 p-4 rounded-lg border-l-4 border-yellow-500">
                  <h4 class="font-semibold text-yellow-600 mb-2">公益与宣传积分</h4>
                  <ul class="list-disc pl-5 space-y-2 text-gray-700">
                    <li>参与联盟组织的公益活动（如社区服务、慈善捐赠等），每次积 10 分；主动发起并组织公益活动，额外积 20 分。</li>
                    <li>积极宣传联盟品牌与活动，通过朋友圈、社交媒体、线下渠道等方式扩大联盟影响力，经会长、监事长和书记员认定后，每次积 5 - 10 分。</li>
                  </ul>
                </div>
              </div>
            </div>
            
            <!-- 积分扣除规则 -->
            <div>
              <h3 class="text-xl font-semibold text-gray-800 mb-4 flex items-center">
                <i class="fa fa-minus-circle text-danger mr-2"></i> 积分扣除规则
              </h3>
              
              <div class="space-y-6">
                <div class="bg-red-50 p-4 rounded-lg border-l-4 border-danger">
                  <h4 class="font-semibold text-danger mb-2">活动与会议缺席扣分</h4>
                  <ul class="list-disc pl-5 space-y-2 text-gray-700">
                    <li>无故缺席全体成员大会，每次扣 30 分；缺席联盟举办的培训、讲座、论坛等活动，每次扣 15 分。因特殊情况提前请假并获得批准的，不扣分。</li>
                    <li>报名参与联盟活动后，未提前请假且未到场，每次扣 10 分。</li>
                  </ul>
                </div>
                
                <div class="bg-orange-50 p-4 rounded-lg border-l-4 border-orange-500">
                  <h4 class="font-semibold text-orange-600 mb-2">违规行为扣分</h4>
                  <ul class="list-disc pl-5 space-y-2 text-gray-700">
                    <li>违反联盟章程、行业自律规范或在资源对接、商业合作中存在欺诈、违约等不诚信行为，视情节严重程度扣 20 - 100 分，情节特别严重的，直接取消会员资格。</li>
                    <li>在联盟微信群等平台发布虚假信息、广告骚扰、恶意诋毁其他会员等不良内容，每次扣 15 分；造成恶劣影响的，扣 30 分。</li>
                  </ul>
                </div>
                
                <div class="bg-gray-50 p-4 rounded-lg border-l-4 border-gray-500">
                  <h4 class="font-semibold text-gray-600 mb-2">消极怠工扣分</h4>
                  <ul class="list-disc pl-5 space-y-2 text-gray-700">
                    <li>连续 6 个月未参与任何联盟活动、未提交资源信息、未与其他会员产生合作的会员，视为消极怠工，每季度末扣 25 分。</li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </main>

  <!-- 页脚 -->
  <footer class="bg-white border-t border-gray-200">
    <div class="container mx-auto px-4 sm:px-6 lg:px-8 py-8">
      <div class="flex flex-col md:flex-row justify-between items-center">
        <div class="mb-4 md:mb-0">
          <p class="text-gray-500 text-sm">© 2025 汉江圈商业联盟. 保留所有权利.</p>
        </div>
        <div class="flex space-x-6">
          <a href="#" class="text-gray-400 hover:text-primary transition-colors duration-200">
            <i class="fa fa-weixin text-xl"></i>
          </a>
          <a href="#" class="text-gray-400 hover:text-primary transition-colors duration-200">
            <i class="fa fa-weibo text-xl"></i>
          </a>
          <a href="#" class="text-gray-400 hover:text-primary transition-colors duration-200">
            <i class="fa fa-linkedin text-xl"></i>
          </a>
          <a href="#" class="text-gray-400 hover:text-primary transition-colors duration-200">
            <i class="fa fa-envelope text-xl"></i>
          </a>
        </div>
      </div>
    </div>
  </footer>

  <!-- 新增会员模态框 -->
  <div id="add-member-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
    <div class="bg-white rounded-xl w-full max-w-lg mx-4 overflow-hidden shadow-xl transform transition-all">
      <div class="px-6 py-4 border-b border-gray-200">
        <div class="flex justify-between items-center">
          <h3 class="text-lg font-semibold text-gray-900">新增会员</h3>
          <button id="close-member-modal" class="text-gray-400 hover:text-gray-500 focus:outline-none">
            <i class="fa fa-times text-xl"></i>
          </button>
        </div>
      </div>
      <div class="px-6 py-4">
        <form id="add-member-form">
          <div class="space-y-4">
            <div>
              <label for="member-name" class="block text-sm font-medium text-gray-700">会员名称</label>
              <input type="text" id="member-name" name="member-name" required class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary focus:border-primary">
            </div>
            <div>
              <label for="member-industry" class="block text-sm font-medium text-gray-700">所属行业</label>
              <input type="text" id="member-industry" name="member-industry" required class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary focus:border-primary">
            </div>
            <div>
              <label for="member-contact" class="block text-sm font-medium text-gray-700">联系方式</label>
              <input type="text" id="member-contact" name="member-contact" required class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary focus:border-primary">
            </div>
            <div>
              <label for="member-initial-points" class="block text-sm font-medium text-gray-700">初始积分</label>
              <input type="number" id="member-initial-points" name="member-initial-points" min="0" value="0" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary focus:border-primary">
            </div>
            <div>
              <label for="member-status" class="block text-sm font-medium text-gray-700">会员状态</label>
              <select id="member-status" name="member-status" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary focus:border-primary">
                <option value="active">活跃</option>
                <option value="inactive">不活跃</option>
                <option value="suspended">暂停</option>
                <option value="expired">已过期</option>
              </select>
            </div>
          </div>
        </form>
      </div>
      <div class="px-6 py-4 bg-gray-50 flex justify-end space-x-3">
        <button id="cancel-add-member" class="px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary">
          取消
        </button>
        <button id="confirm-add-member" class="px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-primary hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary">
          确认添加
        </button>
      </div>
    </div>
  </div>

  <!-- 新增活动模态框 -->
  <div id="add-activity-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
    <div class="bg-white rounded-xl w-full max-w-lg mx-4 overflow-hidden shadow-xl transform transition-all">
      <div class="px-6 py-4 border-b border-gray-200">
        <div class="flex justify-between items-center">
          <h3 class="text-lg font-semibold text-gray-900">新增活动</h3>
          <button id="close-activity-modal" class="text-gray-400 hover:text-gray-500 focus:outline-none">
            <i class="fa fa-times text-xl"></i>
          </button>
        </div>
      </div>
      <div class="px-6 py-4">
        <form id="add-activity-form">
          <div class="space-y-4">
            <div>
              <label for="activity-name" class="block text-sm font-medium text-gray-700">活动名称</label>
              <input type="text" id="activity-name" name="activity-name" required class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary focus:border-primary">
            </div>
            <div>
              <label for="activity-type" class="block text-sm font-medium text-gray-700">活动类型</label>
              <select id="activity-type" name="activity-type" required class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary focus:border-primary">
                <option value="">请选择活动类型</option>
                <option value="全体成员大会">全体成员大会</option>
                <option value="培训">培训</option>
                <option value="讲座">讲座</option>
                <option value="论坛">论坛</option>
                <option value="公益活动">公益活动</option>
                <option value="商业合作">商业合作</option>
              </select>
            </div>
            <div>
              <label for="activity-date" class="block text-sm font-medium text-gray-700">活动日期</label>
              <input type="date" id="activity-date" name="activity-date" required class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary focus:border-primary">
            </div>
            <div>
              <label for="activity-time" class="block text-sm font-medium text-gray-700">活动时间</label>
              <input type="time" id="activity-time" name="activity-time" required class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary focus:border-primary">
            </div>
            <div>
              <label for="activity-location" class="block text-sm font-medium text-gray-700">活动地点</label>
              <input type="text" id="activity-location" name="activity-location" required class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary focus:border-primary">
            </div>
            <div>
              <label for="activity-points" class="block text-sm font-medium text-gray-700">基础积分</label>
              <input type="number" id="activity-points" name="activity-points" min="0" required class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary focus:border-primary">
            </div>
            <div>
              <label for="activity-description" class="block text-sm font-medium text-gray-700">活动描述</label>
              <textarea id="activity-description" name="activity-description" rows="3" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary focus:border-primary"></textarea>
            </div>
          </div>
        </form>
      </div>
      <div class="px-6 py-4 bg-gray-50 flex justify-end space-x-3">
        <button id="cancel-add-activity" class="px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary">
          取消
        </button>
        <button id="confirm-add-activity" class="px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-primary hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary">
          确认添加
        </button>
      </div>
    </div>
  </div>

  <!-- 会员详情模态框 -->
  <div id="member-detail-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
    <div class="bg-white rounded-xl w-full max-w-3xl mx-4 overflow-hidden shadow-xl transform transition-all">
      <div class="px-6 py-4 border-b border-gray-200">
        <div class="flex justify-between items-center">
          <h3 class="text-lg font-semibold text-gray-900" id="member-detail-name">会员详情</h3>
          <button id="close-member-detail-modal" class="text-gray-400 hover:text-gray-500 focus:outline-none">
            <i class="fa fa-times text-xl"></i>
          </button>
        </div>
      </div>
      <div class="px-6 py-4">
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
          <div class="md:col-span-1">
            <div class="bg-gray-50 rounded-lg p-4">
              <div class="flex justify-center mb-4">
                <div class="w-24 h-24 rounded-full bg-primary/10 flex items-center justify-center">
                  <i class="fa fa-user text-primary text-4xl"></i>
                </div>
              </div>
              <div class="space-y-3 text-center">
                <h4 class="font-semibold text-lg" id="detail-name">会员名称</h4>
                <p class="text-gray-500" id="detail-industry">所属行业</p>
                <div class="flex items-center justify-center">
                  <i class="fa fa-phone text-gray-400 mr-2"></i>
                  <span id="detail-contact">联系方式</span>
                </div>
                <div class="mt-4 pt-4 border-t border-gray-200">
                  <div class="flex justify-between items-center mb-2">
                    <span class="text-sm text-gray-500">会员状态</span>
                    <span id="detail-status" class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">活跃</span>
                  </div>
                  <div class="flex justify-between items-center">
                    <span class="text-sm text-gray-500">加入日期</span>
                    <span id="detail-join-date">2025-01-01</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="md:col-span-2">
            <div class="bg-gray-50 rounded-lg p-4 mb-4">
              <div class="flex justify-between items-center mb-4">
                <h4 class="font-semibold">当前积分</h4>
                <div class="text-3xl font-bold text-primary" id="detail-points">0</div>
              </div>
              <div class="grid grid-cols-2 gap-4">
                <div class="bg-white p-3 rounded-lg">
                  <div class="text-sm text-gray-500">活动参与积分</div>
                  <div class="font-semibold" id="detail-activity-points">0</div>
                </div>
                <div class="bg-white p-3 rounded-lg">
                  <div class="text-sm text-gray-500">资源贡献积分</div>
                  <div class="font-semibold" id="detail-resource-points">0</div>
                </div>
                <div class="bg-white p-3 rounded-lg">
                  <div class="text-sm text-gray-500">合作互助积分</div>
                  <div class="font-semibold" id="detail-cooperation-points">0</div>
                </div>
                <div class="bg-white p-3 rounded-lg">
                  <div class="text-sm text-gray-500">公益宣传积分</div>
                  <div class="font-semibold" id="detail-publicity-points">0</div>
                </div>
              </div>
            </div>
            
            <div>
              <h4 class="font-semibold mb-3">最近积分记录</h4>
              <div class="space-y-3 max-h-64 overflow-y-auto scrollbar-hide" id="detail-points-history">
                <!-- 积分记录将通过JavaScript动态生成 -->
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="px-6 py-4 bg-gray-50 flex justify-end space-x-3">
        <button id="add-points-btn" class="px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-secondary hover:bg-secondary/90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-secondary">
          <i class="fa fa-plus-circle mr-1"></i> 增加积分
        </button>
        <button id="deduct-points-btn" class="px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-danger hover:bg-danger/90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-danger">
          <i class="fa fa-minus-circle mr-1"></i> 扣除积分
        </button>
      </div>
    </div>
  </div>

  <!-- 积分操作模态框 -->
  <div id="points-operation-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
    <div class="bg-white rounded-xl w-full max-w-md mx-4 overflow-hidden shadow-xl transform transition-all">
      <div class="px-6 py-4 border-b border-gray-200">
        <div class="flex justify-between items-center">
          <h3 class="text-lg font-semibold text-gray-900" id="points-operation-title">积分操作</h3>
          <button id="close-points-operation-modal" class="text-gray-400 hover:text-gray-500 focus:outline-none">
            <i class="fa fa-times text-xl"></i>
          </button>
        </div>
      </div>
      <div class="px-6 py-4">
        <form id="points-operation-form">
          <div class="space-y-4">
            <div>
              <label for="operation-type" class="block text-sm font-medium text-gray-700">操作类型</label>
              <select id="operation-type" name="operation-type" required class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary focus:border-primary">
                <option value="activity">活动参与</option>
                <option value="resource">资源贡献</option>
                <option value="cooperation">合作互助</option>
                <option value="publicity">公益宣传</option>
                <option value="penalty">违规处罚</option>
              </select>
            </div>
            <div>
              <label for="operation-points" class="block text-sm font-medium text-gray-700">积分数量</label>
              <input type="number" id="operation-points" name="operation-points" min="1" required class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary focus:border-primary">
            </div>
            <div>
              <label for="operation-description" class="block text-sm font-medium text-gray-700">操作说明</label>
              <textarea id="operation-description" name="operation-description" rows="3" required class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary focus:border-primary"></textarea>
            </div>
            <div>
              <label for="operation-date" class="block text-sm font-medium text-gray-700">操作日期</label>
              <input type="date" id="operation-date" name="operation-date" required class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary focus:border-primary">
            </div>
          </div>
        </form>
      </div>
      <div class="px-6 py-4 bg-gray-50 flex justify-end space-x-3">
        <button id="cancel-points-operation" class="px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary">
          取消
        </button>
        <button id="confirm-points-operation" class="px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-primary hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary">
          确认操作
        </button>
      </div>
    </div>
  </div>

  <script>
    // 示例数据
    const members = [
      { id: 1, name: "武汉科技有限公司", industry: "信息技术", contact: "13800138001", points: 850, status: "active", joinDate: "2025-01-15",
        pointsBreakdown: { activity: 320, resource: 280, cooperation: 150, publicity: 100 },
        pointsHistory: [
          { type: "activity", points: 20, description: "参加全体成员大会", date: "2025-06-20" },
          { type: "resource", points: 30, description: "成功介绍资源并促成对接", date: "2025-06-15" },
          { type: "publicity", points: 10, description: "在朋友圈宣传联盟活动", date: "2025-06-10" },
          { type: "cooperation", points: 10, description: "与会员B达成商业合作", date: "2025-06-05" },
          { type: "activity", points: 10, description: "参加行业培训讲座", date: "2025-05-28" }
        ]
      },
      { id: 2, name: "汉江建材集团", industry: "建材", contact: "13900139002", points: 720, status: "active", joinDate: "2025-02-08",
        pointsBreakdown: { activity: 240, resource: 180, cooperation: 200, publicity: 100 },
        pointsHistory: [
          { type: "activity", points: 10, description: "参加行业论坛", date: "2025-06-18" },
          { type: "cooperation", points: 15, description: "与会员C达成商业合作", date: "2025-06-12" },
          { type: "resource", points: 5, description: "提供有效资源信息", date: "2025-06-07" },
          { type: "publicity", points: 10, description: "组织线下宣传活动", date: "2025-05-30" },
          { type: "activity", points: 20, description: "参加全体成员大会", date: "2025-05-20" }
        ]
      },
      { id: 3, name: "长江物流有限公司", industry: "物流", contact: "13700137003", points: 680, status: "active", joinDate: "2025-01-22",
        pointsBreakdown: { activity: 200, resource: 200, cooperation: 180, publicity: 100 },
        pointsHistory: [
          { type: "resource", points: 20, description: "成功介绍资源并促成对接", date: "2025-06-16" },
          { type: "activity", points: 10, description: "参加物流专题讲座", date: "2025-06-11" },
          { type: "cooperation", points: 10, description: "与会员D达成商业合作", date: "2025-06-03" },
          { type: "publicity", points: 5, description: "在社交媒体宣传联盟", date: "2025-05-25" },
          { type: "activity", points: 10, description: "参加培训活动", date: "2025-05-18" }
        ]
      },
      { id: 4, name: "楚天食品有限公司", industry: "食品", contact: "13600136004", points: 610, status: "active", joinDate: "2025-03-10",
        pointsBreakdown: { activity: 180, resource: 150, cooperation: 180, publicity: 100 },
        pointsHistory: [
          { type: "cooperation", points: 10, description: "与会员E达成商业合作", date: "2025-06-14" },
          { type: "activity", points: 20, description: "参加全体成员大会", date: "2025-06-10" },
          { type: "resource", points: 5, description: "提供有效资源信息", date: "2025-06-05" },
          { type: "publicity", points: 10, description: "在行业展会宣传联盟", date: "2025-05-22" },
          { type: "activity", points: 10, description: "参加食品安全培训", date: "2025-05-15" }
        ]
      },
      { id: 5, name: "东湖科技园区", industry: "园区管理", contact: "13500135005", points: 590, status: "active", joinDate: "2025-02-18",
        pointsBreakdown: { activity: 160, resource: 180, cooperation: 150, publicity: 100 },
        pointsHistory: [
          { type: "activity", points: 10, description: "参加园区发展论坛", date: "2025-06-09" },
          { type: "resource", points: 20, description: "成功介绍资源并促成对接", date: "2025-06-03" },
          { type: "publicity", points: 5, description: "在园区内宣传联盟", date: "2025-05-28" },
          { type: "cooperation", points: 10, description: "与会员F达成商业合作", date: "2025-05-20" },
          { type: "activity", points: 10, description: "参加政策解读讲座", date: "2025-05-12" }
        ]
      },
      { id: 6, name: "黄鹤楼旅游集团", industry: "旅游", contact: "13400134006", points: 550, status: "active", joinDate: "2025-03-25",
        pointsBreakdown: { activity: 150, resource: 150, cooperation: 100, publicity: 150 },
        pointsHistory: [
          { type: "publicity", points: 20, description: "发起并组织公益旅游活动", date: "2025-06-08" },
          { type: "activity", points: 10, description: "参加旅游行业研讨会", date: "2025-06-02" },
          { type: "resource", points: 5, description: "提供有效资源信息", date: "2025-05-26" },
          { type: "cooperation", points: 10, description: "与会员G达成商业合作", date: "2025-05-18" },
          { type: "publicity", points: 10, description: "在旅游宣传册中介绍联盟", date: "2025-05-10" }
        ]
      },
      { id: 7, name: "汉江金融服务中心", industry: "金融", contact: "13300133007", points: 520, status: "active", joinDate: "2025-01-30",
        pointsBreakdown: { activity: 180, resource: 120, cooperation: 120, publicity: 100 },
        pointsHistory: [
          { type: "activity", points: 20, description: "参加全体成员大会", date: "2025-06-05" },
          { type: "cooperation", points: 10, description: "为会员H提供金融咨询", date: "2025-05-30" },
          { type: "resource", points: 10, description: "提供有价值的市场分析报告", date: "2025-05-22" },
          { type: "publicity", points: 5, description: "在金融论坛宣传联盟", date: "2025-05-15" },
          { type: "activity", points: 10, description: "参加金融科技讲座", date: "2025-05-08" }
        ]
      },
      { id: 8, name: "武汉软件园区", industry: "软件", contact: "13200132008", points: 490, status: "active", joinDate: "2025-02-22",
        pointsBreakdown: { activity: 140, resource: 150, cooperation: 100, publicity: 100 },
        pointsHistory: [
          { type: "resource", points: 20, description: "成功介绍资源并促成对接", date: "2025-06-01" },
          { type: "activity", points: 10, description: "参加软件开发培训", date: "2025-05-25" },
          { type: "publicity", points: 5, description: "在园区活动中宣传联盟", date: "2025-05-18" },
          { type: "cooperation", points: 10, description: "与会员I达成技术合作", date: "2025-05-10" },
          { type: "activity", points: 10, description: "参加行业交流会", date: "2025-05-05" }
        ]
      },
      { id: 9, name: "长江文化传媒有限公司", industry: "文化传媒", contact: "13100131009", points: 470, status: "active", joinDate: "2025-04-05",
        pointsBreakdown: { activity: 120, resource: 100, cooperation: 100, publicity: 150 },
        pointsHistory: [
          { type: "publicity", points: 10, description: "制作联盟宣传视频", date: "2025-05-30" },
          { type: "activity", points: 10, description: "参加文化产业论坛", date: "2025-05-20" },
          { type: "cooperation", points: 10, description: "为会员J提供设计服务", date: "2025-05-15" },
          { type: "resource", points: 5, description: "提供商业合作机会", date: "2025-05-10" },
          { type: "publicity", points: 10, description: "在社交媒体宣传联盟活动", date: "2025-05-05" }
        ]
      },
      { id: 10, name: "汉江医疗器械有限公司", industry: "医疗器械", contact: "13000130010", points: 450, status: "active", joinDate: "2025-03-18",
        pointsBreakdown: { activity: 130, resource: 120, cooperation: 100, publicity: 100 },
        pointsHistory: [
          { type: "activity", points: 10, description: "参加医疗器械展览会", date: "2025-05-28" },
          { type: "resource", points: 10, description: "提供有价值的行业资讯", date: "2025-05-20" },
          { type: "publicity", points: 5, description: "在行业会议宣传联盟", date: "2025-05-15" },
          { type: "cooperation", points: 10, description: "与会员K达成合作", date: "2025-05-10" },
          { type: "activity", points: 10, description: "参加产品培训会", date: "2025-05-05" }
        ]
      }
    ];
    
    const activities = [
      { id: 1, name: "2025年第二季度全体成员大会", type: "全体成员大会", date: "2025-06-20", time: "09:30", location: "汉江国际会议中心", points: 20, description: "总结上季度工作，规划下季度目标，讨论联盟重大事项。" },
      { id: 2, name: "数字化转型与企业发展论坛", type: "论坛", date: "2025-06-18", time: "14:00", location: "东湖国际会议中心", points: 10, description: "探讨企业数字化转型的路径与方法，分享成功案例。" },
      { id: 3, name: "物流供应链优化培训", type: "培训", date: "2025-06-11", time: "10:00", location: "长江物流培训中心", points: 10, description: "学习物流供应链优化的最新技术和方法，提升企业运营效率。" },
      { id: 4, name: "金融科技应用讲座", type: "讲座", date: "2025-05-30", time: "15:00", location: "汉江金融服务中心", points: 10, description: "了解金融科技在企业中的应用案例和发展趋势。" },
      { id: 5, name: "绿色建材发展研讨会", type: "论坛", date: "2025-05-28", time: "09:00", location: "汉江建材集团总部", points: 10, description: "研讨绿色建材的发展趋势和应用前景，促进会员企业技术交流。" },
      { id: 6, name: "食品安全管理培训", type: "培训", date: "2025-05-22", time: "14:00", location: "楚天食品有限公司", points: 10, description: "学习最新食品安全管理法规和标准，提升企业食品安全管理水平。" },
      { id: 7, name: "2025年第一季度全体成员大会", type: "全体成员大会", date: "2025-05-20", time: "09:30", location: "汉江国际会议中心", points: 20, description: "总结上季度工作，规划下季度目标，讨论联盟重大事项。" },
      { id: 8, name: "园区企业合作对接会", type: "商业合作", date: "2025-05-18", time: "10:00", location: "东湖科技园区", points: 10, description: "促进园区内企业之间的交流与合作，寻找商业机会。" },
      { id: 9, name: "旅游行业营销分享会", type: "讲座", date: "2025-05-15", time: "14:00", location: "黄鹤楼旅游集团", points: 10, description: "分享旅游行业营销经验和创新模式，提升企业市场竞争力。" },
      { id: 10, name: "公益环保活动", type: "公益活动", date: "2025-05-10", time: "09:00", location: "汉江湿地公园", points: 10, description: "组织会员企业参与公益环保活动，提升联盟社会形象。" }
    ];
    
    // 当前选中的会员ID
    let selectedMemberId = null;
    
    // DOM加载完成后执行
    document.addEventListener('DOMContentLoaded', function() {
      // 初始化图表
      initCharts();
      
      // 渲染会员表格
      renderMembersTable();
      
      // 渲染活动卡片
      renderActivitiesGrid();
      
      // 移动端菜单切换
      document.getElementById('mobile-menu-button').addEventListener('click', function() {
        const mobileMenu = document.getElementById('mobile-menu');
        mobileMenu.classList.toggle('hidden');
      });
      
      // 新增会员模态框控制
      document.getElementById('add-member-btn').addEventListener('click', function() {
        document.getElementById('add-member-modal').classList.remove('hidden');
      });
      
      document.getElementById('add-member-btn-mobile').addEventListener('click', function() {
        document.getElementById('add-member-modal').classList.remove('hidden');
        document.getElementById('mobile-menu').classList.add('hidden');
      });
      
      document.getElementById('close-member-modal').addEventListener('click', function() {
        document.getElementById('add-member-modal').classList.add('hidden');
      });
      
      document.getElementById('cancel-add-member').addEventListener('click', function() {
        document.getElementById('add-member-modal').classList.add('hidden');
      });
      
      // 新增活动模态框控制
      document.getElementById('add-activity-btn').addEventListener('click', function() {
        document.getElementById('add-activity-modal').classList.remove('hidden');
      });
      
      document.getElementById('close-activity-modal').addEventListener('click', function() {
        document.getElementById('add-activity-modal').classList.add('hidden');
      });
      
      document.getElementById('cancel-add-activity').addEventListener('click', function() {
        document.getElementById('add-activity-modal').classList.add('hidden');
      });
      
      // 会员详情模态框控制
      document.getElementById('close-member-detail-modal').addEventListener('click', function() {
        document.getElementById('member-detail-modal').classList.add('hidden');
      });
      
      // 积分操作模态框控制
      document.getElementById('close-points-operation-modal').addEventListener('click', function() {
        document.getElementById('points-operation-modal').classList.add('hidden');
      });
      
      document.getElementById('cancel-points-operation').addEventListener('click', function() {
        document.getElementById('points-operation-modal').classList.add('hidden');
      });
      
      // 添加会员表单提交
      document.getElementById('confirm-add-member').addEventListener('click', function() {
        const name = document.getElementById('member-name').value;
        const industry = document.getElementById('member-industry').value;
        const contact = document.getElementById('member-contact').value;
        const points = parseInt(document.getElementById('member-initial-points').value) || 0;
        const status = document.getElementById('member-status').value;
        
        // 创建新会员
        const newMember = {
          id: members.length + 1,
          name: name,
          industry: industry,
          contact: contact,
          points: points,
          status: status,
          joinDate: new Date().toISOString().split('T')[0],
          pointsBreakdown: { activity: 0, resource: 0, cooperation: 0, publicity: 0 },
          pointsHistory: []
        };
        
        // 添加初始积分记录
        if (points > 0) {
          newMember.pointsBreakdown.activity = points;
          newMember.pointsHistory.push({
            type: "activity",
            points: points,
            description: "初始积分",
            date: newMember.joinDate
          });
        }
        
        // 添加到会员列表
        members.push(newMember);
        
        // 更新表格
        renderMembersTable();
        
        // 关闭模态框
        document.getElementById('add-member-modal').classList.add('hidden');
        
        // 重置表单
        document.getElementById('add-member-form').reset();
        
        // 显示成功提示
        showToast('会员添加成功！');
      });
      
      // 添加活动表单提交
      document.getElementById('confirm-add-activity').addEventListener('click', function() {
        const name = document.getElementById('activity-name').value;
        const type = document.getElementById('activity-type').value;
        const date = document.getElementById('activity-date').value;
        const time = document.getElementById('activity-time').value;
        const location = document.getElementById('activity-location').value;
        const points = parseInt(document.getElementById('activity-points').value) || 0;
        const description = document.getElementById('activity-description').value;
        
        // 创建新活动
        const newActivity = {
          id: activities.length + 1,
          name: name,
          type: type,
          date: date,
          time: time,
          location: location,
          points: points,
          description: description
        };
        
        // 添加到活动列表
        activities.push(newActivity);
        
        // 更新活动卡片
        renderActivitiesGrid();
        
        // 关闭模态框
        document.getElementById('add-activity-modal').classList.add('hidden');
        
        // 重置表单
        document.getElementById('add-activity-form').reset();
        
        // 显示成功提示
        showToast('活动添加成功！');
      });
      
      // 增加积分按钮点击事件
      document.getElementById('add-points-btn').addEventListener('click', function() {
        if (selectedMemberId) {
          document.getElementById('points-operation-title').textContent = '增加积分';
          document.getElementById('operation-type').value = 'activity';
          document.getElementById('operation-date').value = new Date().toISOString().split('T')[0];
          document.getElementById('points-operation-modal').classList.remove('hidden');
        }
      });
      
      // 扣除积分按钮点击事件
      document.getElementById('deduct-points-btn').addEventListener('click', function() {
        if (selectedMemberId) {
          document.getElementById('points-operation-title').textContent = '扣除积分';
          document.getElementById('operation-type').value = 'penalty';
          document.getElementById('operation-date').value = new Date().toISOString().split('T')[0];
          document.getElementById('points-operation-modal').classList.remove('hidden');
        }
      });
      
      // 积分操作表单提交
      document.getElementById('confirm-points-operation').addEventListener('click', function() {
        if (selectedMemberId) {
          const type = document.getElementById('operation-type').value;
          const points = parseInt(document.getElementById('operation-points').value) || 0;
          const description = document.getElementById('operation-description').value;
          const date = document.getElementById('operation-date').value;
          
          // 找到会员
          const member = members.find(m => m.id === selectedMemberId);
          
          if (member) {
            // 更新积分
            if (type === 'penalty') {
              // 扣除积分
              member.points = Math.max(0, member.points - points);
              
              // 添加积分记录
              member.pointsHistory.unshift({
                type: type,
                points: -points,
                description: description,
                date: date
              });
            } else {
              // 增加积分
              member.points += points;
              
              // 更新分类积分
              if (type === 'activity') {
                member.pointsBreakdown.activity += points;
              } else if (type === 'resource') {
                member.pointsBreakdown.resource += points;
              } else if (type === 'cooperation') {
                member.pointsBreakdown.cooperation += points;
              } else if (type === 'publicity') {
                member.pointsBreakdown.publicity += points;
              }
              
              // 添加积分记录
              member.pointsHistory.unshift({
                type: type,
                points: points,
                description: description,
                date: date
              });
            }
            
            // 更新会员详情
            updateMemberDetail();
            
            // 更新会员表格
            renderMembersTable();
            
            // 关闭模态框
            document.getElementById('points-operation-modal').classList.add('hidden');
            
            // 显示成功提示
            showToast('积分操作成功！');
          }
        }
      });
      
      // 搜索会员
      document.getElementById('member-search').addEventListener('input', function() {
        renderMembersTable();
      });
      
      // 会员筛选
      document.getElementById('member-filter').addEventListener('change', function() {
        renderMembersTable();
      });
      
      // 活动筛选
      document.getElementById('activity-filter').addEventListener('change', function() {
        renderActivitiesGrid();
      });
    });
    
    // 初始化图表
    function initCharts() {
      // 积分分布图表
      const pointsDistributionCtx = document.getElementById('pointsDistributionChart').getContext('2d');
      const pointsDistributionChart = new Chart(pointsDistributionCtx, {
        type: 'bar',
        data: {
          labels: members.slice(0, 5).map(m => m.name),
          datasets: [{
            label: '积分数量',
            data: members.slice(0, 5).map(m => m.points),
            backgroundColor: [
              'rgba(22, 93, 255, 0.7)',
              'rgba(22, 93, 255, 0.6)',
              'rgba(22, 93, 255, 0.5)',
              'rgba(22, 93, 255, 0.4)',
              'rgba(22, 93, 255, 0.3)'
            ],
            borderColor: [
              'rgba(22, 93, 255, 1)',
              'rgba(22, 93, 255, 1)',
              'rgba(22, 93, 255, 1)',
              'rgba(22, 93, 255, 1)',
              'rgba(22, 93, 255, 1)'
            ],
            borderWidth: 1
          }]
        },
        options: {
          responsive: true,
          maintainAspectRatio: false,
          scales: {
            y: {
              beginAtZero: true
            }
          },
          plugins: {
            legend: {
              display: false
            }
          }
        }
      });
      
      // 活动类型图表
      const activityTypeCtx = document.getElementById('activityTypeChart').getContext('2d');
      const activityTypeChart = new Chart(activityTypeCtx, {
        type: 'doughnut',
        data: {
          labels: ['全体成员大会', '培训', '讲座', '论坛', '公益活动', '商业合作'],
          datasets: [{
            data: [
              activities.filter(a => a.type === '全体成员大会').length,
              activities.filter(a => a.type === '培训').length,
              activities.filter(a => a.type === '讲座').length,
              activities.filter(a => a.type === '论坛').length,
              activities.filter(a => a.type === '公益活动').length,
              activities.filter(a => a.type === '商业合作').length
            ],
            backgroundColor: [
              'rgba(22, 93, 255, 0.7)',
              'rgba(54, 211, 153, 0.7)',
              'rgba(255, 159, 67, 0.7)',
              'rgba(153, 102, 255, 0.7)',
              'rgba(255, 99, 132, 0.7)',
              'rgba(75, 192, 192, 0.7)'
            ],
            borderColor: [
              'rgba(22, 93, 255, 1)',
              'rgba(54, 211, 153, 1)',
              'rgba(255, 159, 67, 1)',
              'rgba(153, 102, 255, 1)',
              'rgba(255, 99, 132, 1)',
              'rgba(75, 192, 192, 1)'
            ],
            borderWidth: 1
          }]
        },
        options: {
          responsive: true,
          maintainAspectRatio: false,
          plugins: {
            legend: {
              position: 'bottom'
            }
          }
        }
      });
    }
    
    // 渲染会员表格
    function renderMembersTable() {
      const tableBody = document.getElementById('members-table-body');
      const searchTerm = document.getElementById('member-search').value.toLowerCase();
      const filter = document.getElementById('member-filter').value;
      
      // 过滤会员
      let filteredMembers = members.filter(member => 
        member.name.toLowerCase().includes(searchTerm) || 
        member.industry.toLowerCase().includes(searchTerm)
      );
      
      // 应用筛选
      if (filter === 'top') {
        filteredMembers = filteredMembers.sort((a, b) => b.points - a.points).slice(0, 10);
      } else if (filter === 'active') {
        filteredMembers = filteredMembers.filter(member => member.status === 'active');
      } else if (filter === 'inactive') {
        filteredMembers = filteredMembers.filter(member => member.status !== 'active');
      }
      
      // 清空表格
      tableBody.innerHTML = '';
      
      // 渲染表格行
      filteredMembers.forEach(member => {
        const row = document.createElement('tr');
        row.className = 'hover:bg-gray-50 transition-colors duration-150';
        
        // 会员状态类
        let statusClass = '';
        let statusText = '';
        
        switch(member.status) {
          case 'active':
            statusClass = 'bg-green-100 text-green-800';
            statusText = '活跃';
            break;
          case 'inactive':
            statusClass = 'bg-yellow-100 text-yellow-800';
            statusText = '不活跃';
            break;
          case 'suspended':
            statusClass = 'bg-red-100 text-red-800';
            statusText = '暂停';
            break;
          case 'expired':
            statusClass = 'bg-gray-100 text-gray-800';
            statusText = '已过期';
            break;
        }
        
        row.innerHTML = `
          <td class="px-6 py-4 whitespace-nowrap">
            <div class="text-sm font-medium text-gray-900">#${member.id}</div>
          </td>
          <td class="px-6 py-4 whitespace-nowrap">
            <div class="flex items-center">
              <div class="flex-shrink-0 h-10 w-10 bg-primary/10 rounded-full flex items-center justify-center">
                <i class="fa fa-building text-primary"></i>
              </div>
              <div class="ml-4">
                <div class="text-sm font-medium text-gray-900">${member.name}</div>
                <div class="text-sm text-gray-500">${member.contact}</div>
              </div>
            </div>
          </td>
          <td class="px-6 py-4 whitespace-nowrap">
            <div class="text-sm text-gray-900">${member.industry}</div>
          </td>
          <td class="px-6 py-4 whitespace-nowrap">
            <div class="text-sm font-medium text-gray-900">${member.points}</div>
            <div class="text-xs text-gray-500">
              ${getPointsBreakdownText(member)}
            </div>
          </td>
          <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
            ${member.pointsHistory.length > 0 ? member.pointsHistory[0].date : '无记录'}
          </td>
          <td class="px-6 py-4 whitespace-nowrap">
            <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${statusClass}">
              ${statusText}
            </span>
          </td>
          <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
            <button class="text-primary hover:text-primary/80 mr-3 view-member" data-id="${member.id}">
              <i class="fa fa-eye"></i> 查看
            </button>
          </td>
        `;
        
        tableBody.appendChild(row);
      });
      
      // 添加查看会员详情事件
      document.querySelectorAll('.view-member').forEach(button => {
        button.addEventListener('click', function() {
          const memberId = parseInt(this.getAttribute('data-id'));
          selectedMemberId = memberId;
          showMemberDetail(memberId);
        });
      });
    }
    
    // 获取积分组成文本
    function getPointsBreakdownText(member) {
      const breakdown = member.pointsBreakdown;
      return `活动: ${breakdown.activity} | 资源: ${breakdown.resource} | 合作: ${breakdown.cooperation} | 宣传: ${breakdown.publicity}`;
    }
    
    // 显示会员详情
    function showMemberDetail(memberId) {
      const member = members.find(m => m.id === memberId);
      
      if (member) {
        // 更新会员详情信息
        document.getElementById('member-detail-name').textContent = `会员详情: ${member.name}`;
        document.getElementById('detail-name').textContent = member.name;
        document.getElementById('detail-industry').textContent = member.industry;
        document.getElementById('detail-contact').textContent = member.contact;
        document.getElementById('detail-points').textContent = member.points;
        document.getElementById('detail-join-date').textContent = member.joinDate;
        
        // 更新会员状态
        let statusClass = '';
        let statusText = '';
        
        switch(member.status) {
          case 'active':
            statusClass = 'bg-green-100 text-green-800';
            statusText = '活跃';
            break;
          case 'inactive':
            statusClass = 'bg-yellow-100 text-yellow-800';
            statusText = '不活跃';
            break;
          case 'suspended':
            statusClass = 'bg-red-100 text-red-800';
            statusText = '暂停';
            break;
          case 'expired':
            statusClass = 'bg-gray-100 text-gray-800';
            statusText = '已过期';
            break;
        }
        
        document.getElementById('detail-status').className = `px-2 py-1 text-xs rounded-full ${statusClass}`;
        document.getElementById('detail-status').textContent = statusText;
        
        // 更新积分明细
        document.getElementById('detail-activity-points').textContent = member.pointsBreakdown.activity;
        document.getElementById('detail-resource-points').textContent = member.pointsBreakdown.resource;
        document.getElementById('detail-cooperation-points').textContent = member.pointsBreakdown.cooperation;
        document.getElementById('detail-publicity-points').textContent = member.pointsBreakdown.publicity;
        
        // 更新积分历史
        updatePointsHistory(member);
        
        // 显示模态框
        document.getElementById('member-detail-modal').classList.remove('hidden');
      }
    }
    
    // 更新积分历史
    function updatePointsHistory(member) {
      const historyContainer = document.getElementById('detail-points-history');
      historyContainer.innerHTML = '';
      
      if (member.pointsHistory.length === 0) {
        historyContainer.innerHTML = '<div class="text-center text-gray-500 py-4">暂无积分记录</div>';
        return;
      }
      
      // 只显示最近5条记录
      const recentHistories = member.pointsHistory.slice(0, 5);
      
      recentHistories.forEach(record => {
        const historyItem = document.createElement('div');
        historyItem.className = 'flex items-center p-3 bg-white rounded-lg shadow-sm';
        
        // 积分类型图标和颜色
        let icon = '';
        let colorClass = '';
        
        switch(record.type) {
          case 'activity':
            icon = 'fa-calendar-check-o';
            colorClass = 'text-blue-500';
            break;
          case 'resource':
            icon = 'fa-share-alt';
            colorClass = 'text-green-500';
            break;
          case 'cooperation':
            icon = 'fa-handshake-o';
            colorClass = 'text-purple-500';
            break;
          case 'publicity':
            icon = 'fa-bullhorn';
            colorClass = 'text-yellow-500';
            break;
          case 'penalty':
            icon = 'fa-ban';
            colorClass = 'text-red-500';
            break;
        }
        
        // 积分符号
        const pointsSign = record.points > 0 ? '+' : '';
        
        historyItem.innerHTML = `
          <div class="flex-shrink-0 h-10 w-10 rounded-full bg-${colorClass.replace('text-', '')}/10 flex items-center justify-center">
            <i class="fa ${icon} ${colorClass}"></i>
          </div>
          <div class="ml-4 flex-grow">
            <div class="text-sm font-medium text-gray-900">${record.description}</div>
            <div class="text-xs text-gray-500">${record.date}</div>
          </div>
          <div class="ml-4 text-sm font-medium ${record.points > 0 ? 'text-green-600' : 'text-red-600'}">
            ${pointsSign}${record.points}
          </div>
        `;
        
        historyContainer.appendChild(historyItem);
      });
    }
    
    // 更新会员详情
    function updateMemberDetail() {
      if (selectedMemberId) {
        const member = members.find(m => m.id === selectedMemberId);
        
        if (member) {
        if (member) {
          document.getElementById('detail-points').textContent = member.points;
          document.getElementById('detail-activity-points').textContent = member.pointsBreakdown.activity;
          document.getElementById('detail-resource-points').textContent = member.pointsBreakdown.resource;
          document.getElementById('detail-cooperation-points').textContent = member.pointsBreakdown.cooperation;
          document.getElementById('detail-publicity-points').textContent = member.pointsBreakdown.publicity;
          
          // 更新积分历史
          updatePointsHistory(member);
        }
      }
    }
    
    // 渲染活动卡片
    function renderActivitiesGrid() {
      const grid = document.getElementById('activities-grid');
      const filter = document.getElementById('activity-filter').value;
      
      // 过滤活动
      let filteredActivities = [...activities];
      
      if (filter === 'upcoming') {
        const today = new Date().toISOString().split('T')[0];
        filteredActivities = filteredActivities.filter(activity => activity.date >= today);
      } else if (filter === 'past') {
        const today = new Date().toISOString().split('T')[0];
        filteredActivities = filteredActivities.filter(activity => activity.date < today);
      }
      
      // 按日期排序
      filteredActivities.sort((a, b) => new Date(a.date) - new Date(b.date));
      
      // 清空网格
      grid.innerHTML = '';
      
      // 渲染活动卡片
      filteredActivities.forEach(activity => {
        const card = document.createElement('div');
        card.className = 'bg-white rounded-xl overflow-hidden shadow-md hover:shadow-lg transition-shadow duration-300';
        
        // 活动类型颜色
        let typeColor = '';
        
        switch(activity.type) {
          case '全体成员大会':
            typeColor = 'bg-primary text-white';
            break;
          case '培训':
            typeColor = 'bg-green-500 text-white';
            break;
          case '讲座':
            typeColor = 'bg-purple-500 text-white';
            break;
          case '论坛':
            typeColor = 'bg-yellow-500 text-white';
            break;
          case '公益活动':
            typeColor = 'bg-red-500 text-white';
            break;
          case '商业合作':
            typeColor = 'bg-blue-500 text-white';
            break;
        }
        
        // 活动状态
        const today = new Date().toISOString().split('T')[0];
        const isPast = activity.date < today;
        const statusBadge = isPast 
          ? '<span class="px-2 py-1 text-xs rounded-full bg-gray-100 text-gray-800">已结束</span>' 
          : '<span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">即将举行</span>';
        
        card.innerHTML = `
          <div class="p-4">
            <div class="flex justify-between items-start mb-3">
              <span class="px-3 py-1 text-xs font-medium rounded-full ${typeColor}">${activity.type}</span>
              ${statusBadge}
            </div>
            <h3 class="font-semibold text-lg mb-2">${activity.name}</h3>
            <div class="text-sm text-gray-500 mb-3">${activity.description}</div>
            <div class="space-y-2">
              <div class="flex items-center">
                <i class="fa fa-calendar text-gray-400 mr-2"></i>
                <span class="text-sm text-gray-600">${activity.date}</span>
              </div>
              <div class="flex items-center">
                <i class="fa fa-clock-o text-gray-400 mr-2"></i>
                <span class="text-sm text-gray-600">${activity.time}</span>
              </div>
              <div class="flex items-center">
                <i class="fa fa-map-marker text-gray-400 mr-2"></i>
                <span class="text-sm text-gray-600">${activity.location}</span>
              </div>
              <div class="flex items-center">
                <i class="fa fa-star text-yellow-500 mr-2"></i>
                <span class="text-sm text-gray-600">积分: ${activity.points}</span>
              </div>
            </div>
          </div>
          <div class="px-4 py-3 bg-gray-50 flex justify-between items-center">
            <button class="text-primary hover:text-primary/80 text-sm font-medium flex items-center">
              <i class="fa fa-users mr-1"></i> 报名参加
            </button>
            <span class="text-xs text-gray-500">活动ID: #${activity.id}</span>
          </div>
        `;
        
        grid.appendChild(card);
      });
    }
    
    // 显示提示消息
    function showToast(message) {
      // 创建提示元素
      const toast = document.createElement('div');
      toast.className = 'fixed bottom-4 right-4 bg-dark text-white px-4 py-2 rounded-lg shadow-lg z-50 transform transition-all duration-300 translate-y-10 opacity-0';
      toast.textContent = message;
      
      // 添加到页面
      document.body.appendChild(toast);
      
      // 显示动画
      setTimeout(() => {
        toast.classList.remove('translate-y-10', 'opacity-0');
      }, 10);
      
      // 3秒后隐藏
      setTimeout(() => {
        toast.classList.add('translate-y-10', 'opacity-0');
        setTimeout(() => {
          document.body.removeChild(toast);
        }, 300);
      }, 3000);
    }
  </script>
</body>
</html>
    